<template>
  <section class="card-box card-one">
      <div class="card-header">
        <CardTitle :title="NTitle" @showCalendar="setOpenPicker" @getFilterInfo="getFilterInfo"></CardTitle>
      </div>

       <div class="card-content">
          <div class="images-wrapper">

            <!-- left -->
            <span class="icon-btn left-icon-btn" @click="getCurrentPage(currentPage-1,'prev')">
                <i class="el-icon-caret-left"></i>
            </span>

            <!-- img list -->
            <div class="img-list-box">
                <NoData v-if="list.length == 0"></NoData>
                <swiper class="mySwiper" :options="swiperOption" ref="mySwiperA" v-if="list.length > 0 && initOnoff">
                  <swiper-slide v-for="(it,i) in list" :key="i">
                    <img :src="`http://121.201.107.99:20023/epaper/`+it.image" @click="goToNewPage(it.url)" />
                  </swiper-slide>
                </swiper>
            </div>
            <!-- order show -->
            <span class="order-show" v-if="list.length > 0">
                <em>{{ currentPage }}</em><font> / {{ list.length }}</font>
            </span>
            <!-- right -->
            <span class="icon-btn right-icon-btn" @click="getCurrentPage(currentPage+1,'next')">
              <i class="el-icon-caret-right"></i>
            </span>
          </div>
       </div>

       <div class="card-footer">
         <CardFooter></CardFooter>
       </div>

      <mt-datetime-picker ref="picker" type="date" v-model="pickerValue" @confirm="handleConfirm" class="cdatePicker" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"></mt-datetime-picker>

  </section>
</template>

<script>
import CardTitle from '&/components/card-title/index.vue'
import CardFooter from '&/components/card-foot/index.vue'
import NoData from '@/components/no-data/index.vue'

import { swiper, swiperSlide } from 'vue-awesome-swiper' 

import { mapState } from 'vuex';

export default {
  name:'wechat-card-one',
  data(){
    return {
      pickerValue: new Date(),
      initOnoff: false, // 初始化加载完成
      currentPage: 1, // 当前页
      // currentDate: new Date().getTime(), // 当前时间
      list: [], // 新闻列表
      btnOnoff: true,
      swiperOption: {
        // 所有配置均为可选（同Swiper配置）  
        // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,     //我现在还没有搞清楚这个东西，反正加上就是了
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: true, // 用户操作后停止自动播放
        },
        observer:true,//修改swiper自己或子元素时，自动初始化swiper 
　　    observeParents:true,//修改swiper的父元素时，自动初始化swiper 
        loop:true,
        grabCursor : true,
        setWrapperSize :true,
        autoHeight: true,
        pagination : '.swiper-pagination',
        paginationClickable :true,
        scrollbar:'.swiper-scrollbar',
        mousewheelControl : true,
        onTransitionStart(swiper){
          console.log(swiper)
        },
        on:{
          // 开始运动
          slideChangeTransitionStart:() => {
            //... 
          },
          // 结束运动
          slideChangeTransitionEnd: () => {
            this.btnOnoff = true;
            this.$nextTick(() => {
              if(this.swiper.activeIndex == this.list.length+1){
                this.currentPage = 1;
                return;
              }else if(this.swiper.activeIndex == 0){
                this.currentPage = this.list.length;
                return;
              }
              console.log(this.swiper.activeIndex);
              this.currentPage = this.swiper.activeIndex;
            })
          },
        }
      },
      pramsAttr:{
        emotion: '', // 情感 正面 中性 负面 
        labelIdStr: '', // 话题
        startTime: '',
        endTime: '',
      },
      checkFilterChange: 1, // 用来监听表单变化
    }
  },
  created(){
    // this.handleConfirm(new Date().getTime()); // 默认当天筛选
    this.requestCardList();
  }, 
  mounted(){
    this.initCalcContentHeight();
    let index = 0;
    let t = setInterval(() => {
      this.initCalcContentHeight();
      index++;
      if(index >= 20){
        clearInterval(t);
      }
    },1000)
  },
  methods:{
    initCalcContentHeight(){
      let header = document.querySelector('.card-header');
      let content = document.querySelector('.card-content');
      let footer = document.querySelector('.card-footer');
      let body = document.querySelector('body');
      // console.log(header,content,footer,body);
      let spaceHeight = body.clientHeight - header.offsetHeight - footer.offsetHeight;
      console.log(spaceHeight)
      content.style.height = (spaceHeight-30) + 'px';
      this.initOnoff = true;
    },
    requestCardList(){
      this.list = [];
      this.currentPage = 1;
      // this.$nextTick(() => { this.swiper.slideTo(0); })
      this.axios.get(`${this.serverApi}/info/list`,{
        params: this.pramsAttr
      }).then(res => {
        if(res.data.data){
          this.list = res.data.data.data;


          // 其他参数
          this.currentPage = 1; // 当前页
          // this.params.page = res.data.data.page;
          // this.params.size = res.data.data.size;
          // this.params.totalNum = res.data.data.totalNum;
          // this.params.totalPage = res.data.data.totalPage;

          console.log(this.list);
          // debugger
        }
      })
    },
    handleConfirm(v){
      console.log(v)

      // 重新请求
      this.pramsAttr.startTime = new Date(new Date(new Date(v).toLocaleDateString()).getTime()).getTime(); // 当天0点
      this.pramsAttr.endTime = new Date(new Date(new Date(v).toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -1 ).getTime();// 当天23:59

      this.requestCardList();
    },
    // 调到指定页面
    getCurrentPage(page,status){

      // console.log(page,status);

      if(!this.btnOnoff || this.list.length == 0){ return; }
      this.btnOnoff = false;
      // console.log(page,status);

      if(page <= 1){
        page = 1;
        this.btnOnoff = true;
      }else if(page >= this.list.length){
        page = this.list.length;
        this.btnOnoff = true;
      }

      this.currentPage = page;
      // console.log(page,status);

      // 跳到指定页面
      // console.log(this.currentPage-1);
      // this.swiper.slideTo(this.currentPage-1, 1000, false); //切换到第一个slide，速度为1秒
      this.$nextTick(() => {
        if(status === 'prev'){
          this.swiper.slidePrev(1000,true);
        }else{
          this.swiper.slideNext(1000,true);
        }
      })

    },
    // 去到新页面
    goToNewPage(url){
      console.log(url);
      window.open(url,Math.random());
    },
    // 获取顶部筛选区域信息
    getFilterInfo(params){
      console.log(params);
      this.pramsAttr.emotion = params.emotion;
      this.pramsAttr.labelIdStr = params.labelIdStr;

      // this.swiper.init(); // 初始化轮播
      this.checkFilterChange = Math.random();
      this.requestCardList(); // 重新加载
    },
    setOpenPicker(){
      this.$refs.picker.$el.style.position = 'absolute';
      this.$refs.picker.open();
    },
    getTitle(){
      return ''
      // return this.list[this.currentPage].mediaName +'·'+ this.list[this.currentPage].plate;
    }
  },
  computed:{
    ...mapState(['serverApi','imgApi']),
    swiper () {
      if(this.checkFilterChange){
        return this.$refs.mySwiperA.swiper
      }
    },
    NTitle(){
      let t = '';
      try{
        if(this.list.length > 0 && this.list[this.currentPage].hasOwnProperty('mediaName') && this.list[this.currentPage].hasOwnProperty('plate')){
          t =  this.list[this.currentPage].mediaName +'·'+ this.list[this.currentPage].plate;
        }else{
          t =  '新闻日报';
        }
      }catch{
        t =  '新闻日报';
      }
      return t;
    }
  },
  components:{
    CardTitle,
    CardFooter,
    swiper, 
    swiperSlide,
    NoData
  }
}
</script>

<style scoped lang="scss">

  @import "&/assets/css/index.scss";

  .card-box{
    width:pxToRem(360px);height:100%;background-color:#fff;position:relative;overflow:hidden;
    
    /* card-content */
    .card-content{
      width:100%;height:pxToRem(430px);margin-top:pxToRem(6px);background-color:#fff;position:relative;overflow:hidden;
      .images-wrapper{
        width:92%;height:100%;margin:0 auto;position:relative;
        .icon-btn{display:block;width:pxToRem(20px);height:pxToRem(20px);line-height:pxToRem(20px);background:rgba(0,0,0,0.8);color:#fff;text-align:center;font-size:pxToRem(13px);position:absolute;top:50%;cursor: pointer;}
        .left-icon-btn{left:pxToRem(5px);z-index:2;}
        .right-icon-btn{right:pxToRem(5px);z-index:2;}
        .order-show{
            width:pxToRem(50px);height:pxToRem(25px);background:rgba(0,0,0,0.8);position:absolute;bottom:0;left:50%;transform:translateX(-50%);color:#ddd;font-size:pxToRem(15px);text-align:center;line-height:pxToRem(25px);z-index:2;
            em{ font-style: normal; color:#fff; }
        }
        img{
          width:100%;height:100%;
        }
      }
    }

    /* card-more */
    .card-footer{
      width:100%;height:pxToRem(45px);position:fixed;left:0;bottom:0;z-index:2;
      // .view-more{padding:10px 30px;color:#fff;background-color:#268eff;}
    }

    /deep/.mint-datetime-action{color:#c9242b;}
  }
</style>